define(function(require,exports,module){
    'use strict';

    var React = require('react');
    var $ = require('jquery');
    var bootstrap = require('bootstrap');
    var language = require('datetimepickerLanguage');
    var datetimepicker = require('datetimepicker');
    var publicObj = require('lib/public');
    var token = publicObj.get_token();

    //调用AreaMutilDiagram组件
    var AreaMutilDiagram = require('components/diagram/AreaMutilDiagram');
    var ReactLoading = require('../../partial/ReactLoading');

    module.exports = React.createClass({
        loadData:function(start_date,end_date){
            if(start_date && end_date){

                var tmp_start_date = start_date.replace(/-/g,'');
                var tmp_end_date = end_date.replace(/-/g,'');
                
                var tmp = {'ios':[],'android':[]};
                var url = this.props.url;

                this.setState({'start_date':start_date});
                this.setState({'end_date':end_date});
                this.setState({'data':tmp});

                var sql_arr = [];

                var android_sql = "SELECT thedate AS name,\
                                    count(*) AS value\
                                    FROM qeeniao.app_info\
                                    WHERE platform = 'Android'\
                                    AND thedate >= "+tmp_start_date+" and thedate <= "+tmp_end_date+"\
                                    GROUP BY name\
                                    ORDER BY name ASC";

                var ios_sql = "SELECT thedate AS name,\
                                count(*) AS value\
                                FROM qeeniao.app_info\
                                WHERE platform = 'iOS'\
                                AND thedate >= "+tmp_start_date+" and thedate <= "+tmp_end_date+"\
                                GROUP BY name\
                                ORDER BY name ASC";

                sql_arr.push({'name':'android','sql':android_sql});
                sql_arr.push({'name':'ios','sql':ios_sql});

                sql_arr.forEach(function(v,k){
                    $.ajax({
                        url:url,
                        data:{sql:v.sql,'access_token':token},
                        type:'post',
                        dataType:'json',
                        success:function(o){
                            tmp = this.state.data;
                            tmp[v.name] = o;
                            if(this.isMounted()) {
                                this.setState({'data': tmp});
                            }
                        }.bind(this),
                        error:function(xhr,status,err){
                            console.error(v.sql,status,err.toString());
                        }
                    });
                    this.setState({'data':tmp});
                }.bind(this));

            }
        },
        combineAllData:function(data1,data2){
            var long = data1.length >= data2.length ? data1 : data2;
            var short = data2.length >= data1.length ? data2 : data1;
            var tmp = [];
            for(var i=0; i<short.length; i++){
                tmp.push({'name':short[i].name,'value':parseInt(short[i].value) + parseInt(long[i].value)});
            }
            return tmp;
        },
        handleSubmit:function(e){
            var start_date = React.findDOMNode(this.refs.from_date).value.trim();
            var end_date = React.findDOMNode(this.refs.to_date).value.trim();
            this.setState({'start':true});
            this.loadData(start_date,end_date);
        },
        componentDidMount:function(){
            $('#start_num_from_date').datetimepicker({
                language:'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2
            }).on('changeDate',function(ev){
                $('#start_num_to_date').datetimepicker('setStartDate',ev.date);
            }).on('outOfRange',function(){

            });

            $('#start_num_to_date').datetimepicker({
                language:'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2
            }).on('changeDate',function(ev){
                $('#start_num_from_date').datetimepicker('setEndDate',ev.date);
            }).on('outOfRange',function(){

            });
        },
        getInitialState:function(){
            return {
                'data':{'ios':[],'android':[]},
                'start_date':'',
                'end_date':'',
                'start':false
            };
        },
        render:function(){
            var diagram;
            if(this.state.data.ios.length > 0 && this.state.data.android.length > 0){
                var data = [];
                var all = this.combineAllData(this.state.data.ios,this.state.data.android);
                data.push({'name':'ios','data':this.state.data.ios});
                data.push({'name':'android','data':this.state.data.android});
                data.push({'name':'总量','data':all});

                diagram = <AreaMutilDiagram className="" id="StartNumAreaMutilDiagram" id_name="StartNumAreaMutilDiagram" y="启动次数" title="启动次数" data={data} />
            }else{
                if(this.state.start){
                    diagram = <ReactLoading type='spinning-bubbles' color='#e3e3e3'/>
                }
            }

            return (
                <div className="modal fade" id={this.props.id} tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 className="modal-title" id="myModalLabel">更多图表</h4>
                            </div>

                            <div className="modal-body">
                                <div className="container">
                                    <form className="form-inline" id="dateForm" onSubmit={this.handleSubmit}>
                                        <div className="row">
                                            <div className="form-group">
                                                <label htmlFor="from_date">选择日期：</label>
                                                <input onChange={this.handleStartDate} className="form-control" size="16" type="text" value={this.state.start_date} id="start_num_from_date" ref="from_date" readOnly="true" data-date="" data-date-format="yyyy-mm-dd"/>
                                            </div>

                                            <div className="form-group">
                                                <label htmlFor="to_date"> - </label>
                                                <input onChange={this.handleEndDate} className="form-control" size="16" type="text" value={this.state.end_date} id="start_num_to_date" ref="to_date" readOnly="true" data-date="" data-date-format="yyyy-mm-dd"/>
                                            </div>

                                            <button type="submit" style={{marginLeft:'10px'}} className="btn btn-default btn-primary">提交</button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div className="modal-body">
                                <div className="row">
                                    {diagram}
                                </div>
                            </div>

                            <div className="modal-footer">
                                <button type="button" className="btn btn-default" data-dismiss="modal">退出</button>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    });

});